// webpack.config.js
module.exports = {
  entry: {
    main: './src/index.js',
    vendors: './src/vendors.js'
  },
  output: {
    filename: '[name].bundle.js',
    path: __dirname + '/dist'
  }
};

            

              
                Copy
              
            
          

            // src/components/UserProfile.js
export default function UserProfile() {
  console.log('Foydalanuvchi profili yuklandi!');
}

// src/index.js
const userProfileButton = document.getElementById('load-profile');
userProfileButton.addEventListener('click', () => {
  import('./components/UserProfile.js').then(module => {
    const UserProfile = module.default;
    UserProfile();
  }).catch(err => {
    console.error('UserProfile modulini yuklashda xatolik yuz berdi', err);
  });
});

            

              
                Copy
              
            
          

            // src/utils.js
export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

export function multiply(a, b) {
  return a * b;
}

            

              
                Copy
              
            
          

            // src/main.js
import { add } from './utils.js';

console.log(add(5, 3));

            

              
                Copy
              
            
          

            // src/components/HeavyComponent.js
export default function HeavyComponent() {
  console.log('Og\'ir komponent render qilindi!');
  const element = document.createElement('div');
  element.textContent = 'Bu og\'ir komponent.';
  return element;
}

// src/index.js
const lazyLoadTrigger = document.getElementById('lazy-load-trigger');

const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      import('./components/HeavyComponent.js').then(module => {
        const HeavyComponent = module.default;
        const component = HeavyComponent();
        entry.target.appendChild(component);
        observer.unobserve(entry.target); // Yuklangandan keyin kuzatishni to'xtatish
      }).catch(err => {
        console.error('HeavyComponent-ni yuklashda xatolik yuz berdi', err);
      });
    }
  });
}, {
  threshold: 0.1 // Elementning 10% ko'ringanda ishga tushirish
});

observer.observe(lazyLoadTrigger);

            

              
                Copy
              
            
          

            // webpack.config.js (Ilova A uchun)
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');

module.exports = {
  // ... boshqa konfiguratsiyalar
  plugins: [
    new ModuleFederationPlugin({
      name: 'app_a',
      remotes: {
        app_b: 'app_b@http://localhost:3002/remoteEntry.js'
      },
      shared: ['react', 'react-dom'] // React bog'liqliklarini bo'lishish
    })
  ]
};

            

              
                Copy
              
            
          

            // webpack.config.js (Ilova B uchun)
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');

module.exports = {
  // ... boshqa konfiguratsiyalar
  plugins: [
    new ModuleFederationPlugin({
      name: 'app_b',
      filename: 'remoteEntry.js',
      exposes: {
        './Button': './src/components/Button.js'
      },
      shared: ['react', 'react-dom']
    })
  ]
};

            

              
                Copy
              
            
          

            // Ilova A kodida
import React from 'react';

const Button = React.lazy(() => import('app_b/Button'));

function App() {
  return (
    

      
Ilova A
      Tugma yuklanmoqda...
}>
        
      
    

5. Turli Muhitlar uchun Modul Yuklashni Optimallashtirish

Server Tomonidan Renderlash (SSR) va Oldindan Renderlash: Muhim boshlang'ich kontent uchun SSR yoki oldindan renderlash seziladigan unumdorlik va SEO-ni sezilarli darajada yaxshilashi mumkin. Server yoki qurish jarayoni boshlang'ich HTML-ni yaratadi, keyin uni mijoz tomonida JavaScript bilan yaxshilash mumkin (bu jarayon hidratsiya deb ataladi). Bu foydalanuvchilar mazmunli kontentni ancha tezroq ko'rishini anglatadi.

Hidratsiya bilan Mijoz Tomonidan Renderlash (CSR): React, Vue yoki Angular kabi CSR freymvorklari bilan ham, hidratsiya paytida JavaScript yuklanishini ehtiyotkorlik bilan boshqarish juda muhim. Dastlabki render uchun faqat muhim JavaScript yuklanganligiga ishonch hosil qiling, qolganlari esa progressiv ravishda yuklansin.

Progressiv Yaxshilash: Ilovangizni avval oddiy HTML va CSS bilan ishlashga mo'ljallab loyihalashtiring, so'ngra JavaScript yaxshilanishlarini qatlam-qatlam qo'shing. Bu JavaScript o'chirilgan yoki juda sekin ulanishga ega bo'lgan foydalanuvchilarning ham foydalanishga yaroqli, garchi kamroq interaktiv bo'lsa ham, tajribaga ega bo'lishini ta'minlaydi.

6. Vendor To'plamlarini Samarali Boshqarish

Bu nima: React, Lodash yoki Axios kabi uchinchi tomon kutubxonalarini o'z ichiga olgan vendor kodi ko'pincha JavaScript to'plamingizning muhim qismini tashkil qiladi. Ushbu vendor kodini qanday boshqarishni optimallashtirish sezilarli unumdorlik yutuqlarini berishi mumkin.

Bu qanday yordam beradi:

• Yaxshilangan keshlashtirish: Vendor kodini alohida to'plamga ajratish orqali uni ilova kodingizdan mustaqil ravishda keshlash mumkin. Agar ilova kodingiz o'zgarsa, lekin vendor kodi bir xil bo'lib qolsa, foydalanuvchilarga katta vendor to'plamini qayta yuklab olish kerak bo'lmaydi.
• Ilova to'plami hajmining kamayishi: Vendor kodini ajratish asosiy ilova to'plamlaringizni kichikroq va tezroq yuklanadigan qiladi.

Amalga oshirish: Webpack va Rollup kabi to'plovchilar vendor qismlarini optimallashtirish uchun o'rnatilgan imkoniyatlarga ega. Odatda siz ularni 'vendor' deb hisoblanadigan modullarni aniqlash va ularni alohida faylga to'plash uchun sozlayapsiz.

Misol (Webpack):

Webpack-ning optimallashtirish sozlamalari avtomatik vendor bo'lish uchun ishlatilishi mumkin:

            // webpack.config.js
module.exports = {
  // ... boshqa konfiguratsiyalar
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all'
        }
      }
    }
  }
};

            

              
                Copy
              
            
          

Ushbu konfiguratsiya Webpack-ga node_modules dan barcha modullarni alohida vendors qismiga qo'yishni aytadi.

7. HTTP/2 va HTTP/3

Bu nima: HTTP protokolining yangi versiyalari (HTTP/2 va HTTP/3) HTTP/1.1 ga qaraganda sezilarli unumdorlik yaxshilanishlarini taklif etadi, ayniqsa ko'plab kichik fayllarni yuklash uchun. HTTP/2 multiplekslashni joriy etadi, bu esa bitta TCP ulanishi orqali bir vaqtning o'zida bir nechta so'rov va javoblarni yuborish imkonini beradi va qo'shimcha xarajatlarni kamaytiradi.

Bu qanday yordam beradi:

• Ko'plab kichik so'rovlarning qo'shimcha xarajatlarini kamaytiradi: HTTP/2 bilan ko'plab kichik JavaScript modullariga ega bo'lishning (masalan, kodni bo'lish natijasida) jarimasi ancha kamayadi.
• Yaxshilangan kechikish (latency): Sarlavhalarni siqish va server push kabi xususiyatlar yuklash tezligini yanada oshiradi.

Amalga oshirish: Veb-serveringiz (masalan, Nginx, Apache) va xosting provayderingiz HTTP/2 yoki HTTP/3 ni qo'llab-quvvatlashiga ishonch hosil qiling. HTTP/3 uchun u QUIC ga tayanadi, bu esa, ayniqsa dunyoning ko'p qismlarida keng tarqalgan yo'qotishli tarmoqlarda yanada yaxshi kechikishni taklif qilishi mumkin.

JavaScript Modullarini Yuklash uchun Asosiy Samaradorlik Metrikalari

JavaScript modul yuklanishini samarali optimallashtirish uchun uning ta'sirini o'lchashingiz kerak. Quyida kuzatib borish kerak bo'lgan muhim metrikalar keltirilgan:

1. Birinchi Kontentli Chizish (FCP - First Contentful Paint)

Bu nima: FCP sahifa yuklanishni boshlagan paytdan boshlab sahifa tarkibining biron bir qismi ekranda render qilinguncha bo'lgan vaqtni o'lchaydi. Bunga matn, rasmlar va kanvaslar kiradi.

Nima uchun muhim: Yaxshi FCP foydalanuvchi qimmatli kontentni tezda olayotganini ko'rsatadi, hatto sahifa to'liq interaktiv bo'lmasa ham. Sekin JavaScript bajarilishi yoki katta boshlang'ich to'plamlar FCP-ni kechiktirishi mumkin.

2. Interaktivlikkacha bo'lgan Vaqt (TTI - Time to Interactive)

Bu nima: TTI sahifaning to'liq interaktiv bo'lishi uchun qancha vaqt ketishini o'lchaydi. Sahifa quyidagi hollarda interaktiv hisoblanadi:

• U foydali kontentni render qilgan (FCP sodir bo'lgan).
• U foydalanuvchi kiritishiga 50 millisekund ichida ishonchli javob bera oladi.
• U foydalanuvchi kiritishini boshqarish uchun sozlangandir.

Nima uchun muhim: Bu foydalanuvchi tajribasi uchun juda muhim metrika, chunki u foydalanuvchilarning ilovangiz bilan qanchalik tez o'zaro aloqada bo'lishlari bilan bevosita bog'liqdir. JavaScript-ni tahlil qilish, kompilyatsiya qilish va bajarish TTI ga katta hissa qo'shadi.

3. Umumiy Bloklash Vaqti (TBT - Total Blocking Time)

Bu nima: TBT asosiy oqim (main thread) kiritishga javob berishning oldini olish uchun yetarlicha uzoq vaqt davomida bloklangan umumiy vaqtni o'lchaydi. Asosiy oqim JavaScript-ni tahlil qilish, kompilyatsiya qilish, bajarish va axlat yig'ish (garbage collection) kabi vazifalar tomonidan bloklanadi.

Nima uchun muhim: Yuqori TBT bevosita sust va javob bermaydigan foydalanuvchi tajribasi bilan bog'liq. JavaScript bajarilishini optimallashtirish, ayniqsa dastlabki yuklash paytida, TBT-ni kamaytirish uchun kalit hisoblanadi.

4. Eng Katta Kontentli Chizish (LCP - Largest Contentful Paint)

Bu nima: LCP ko'rish maydonidagi eng katta kontent elementining ko'rinadigan bo'lishi uchun ketadigan vaqtni o'lchaydi. Bu odatda rasm, katta matn bloki yoki video bo'ladi.

Nima uchun muhim: LCP — bu foydalanuvchiga yo'naltirilgan metrika bo'lib, u sahifaning asosiy mazmuni qanchalik tez mavjud bo'lishini ko'rsatadi. Bu to'g'ridan-to'g'ri JavaScript yuklash metrikasi bo'lmasa-da, agar JavaScript LCP elementining render qilinishini bloklayotgan yoki uning qayta ishlanishini kechiktirayotgan bo'lsa, u LCP ga ta'sir qiladi.

5. To'plam Hajmi va Tarmoq So'rovlari

Bu nima: Bular foydalanuvchiga yuborilayotgan JavaScript-ning umumiy hajmini va qancha alohida fayl yuklanayotganini ko'rsatadigan asosiy metrikalardir.

Nima uchun muhim: Kichikroq to'plamlar va kamroq tarmoq so'rovlari odatda tezroq yuklanishga olib keladi, ayniqsa sekinroq tarmoqlarda yoki yuqori kechikishga ega hududlarda. Webpack Bundle Analyzer kabi vositalar to'plamlaringiz tarkibini vizualizatsiya qilishga yordam beradi.

6. Skriptni Baholash va Bajarish Vaqti

Bu nima: Bu brauzerning JavaScript kodingizni tahlil qilish, kompilyatsiya qilish va bajarish uchun sarflaydigan vaqtiga ishora qiladi. Buni brauzerning dasturchi vositalarida (Performance yorlig'i) kuzatish mumkin.

Nima uchun muhim: Samarasiz kod, og'ir hisob-kitoblar yoki tahlil qilinadigan katta hajmdagi kod asosiy oqimni band qilishi, TTI va TBT ga ta'sir qilishi mumkin. Algoritmlarni optimallashtirish va oldindan qayta ishlanadigan kod miqdorini kamaytirish juda muhimdir.

Samaradorlikni O'lchash va Tahlil Qilish uchun Vositalar

JavaScript modul yuklash samaradorligini o'lchash va tashxislashga yordam beradigan bir nechta vositalar mavjud:

• Google PageSpeed Insights: Core Web Vitals haqida ma'lumot beradi va samaradorlikni oshirish, jumladan JavaScript-ni optimallashtirish bo'yicha tavsiyalar taklif qiladi.
• Lighthouse (Chrome DevTools-da): Veb-sahifalarning sifati, unumdorligi va mavjudligini yaxshilash uchun avtomatlashtirilgan vosita. U sahifangizni tekshiradi va FCP, TTI, TBT va LCP kabi metrikalar bo'yicha batafsil hisobotlar va aniq tavsiyalar beradi.
• WebPageTest: Dunyoning bir nechta joylaridan va turli tarmoq sharoitlarida veb-sayt tezligini sinash uchun bepul vosita. Global unumdorlikni tushunish uchun zarur.
• Webpack Bundle Analyzer: Webpack chiqish fayllaringiz hajmini vizualizatsiya qilishga va ularning tarkibini tahlil qilishga yordam beradigan plagin, katta bog'liqliklarni yoki kodni bo'lish imkoniyatlarini aniqlaydi.
• Brauzer Dasturchi Vositalari (Performance Yorlig'i): Chrome, Firefox va Edge kabi brauzerlardagi o'rnatilgan unumdorlik profayleri skript bajarilishi, renderlash va tarmoq faoliyatini batafsil tahlil qilish uchun bebaho hisoblanadi.

Global JavaScript Modullarini Optimallashtirish bo'yicha Eng Yaxshi Amaliyotlar

Ushbu usullarni qo'llash va metriklarni tushunish juda muhim, ammo bir nechta umumiy eng yaxshi amaliyotlar sizning optimallashtirishlaringiz ajoyib global tajribaga aylanishini ta'minlaydi:

1. Kritik JavaScript-ga Ustunlik Bering: Dastlabki render va foydalanuvchi o'zaro ta'siri uchun zarur bo'lgan JavaScript-ni aniqlang. Ushbu kodni imkon qadar ertaroq, eng muhim qismlar uchun ideal holda inline yoki kichik, kechiktirilgan modullar sifatida yuklang.
2. Muhim Bo'lmagan JavaScript-ni Kechiktiring: Boshqa hamma narsani faqat kerak bo'lganda yuklash uchun kechiktirilgan yuklash, dinamik importlar va skript teglarida `defer` yoki `async` atributlaridan foydalaning.
3. Uchinchi Tomon Skriptlarini Kamaytiring: Tashqi skriptlar (tahlil, reklama, vidjetlar) bilan ehtiyot bo'ling. Har biri yuklanish vaqtingizga qo'shiladi va asosiy oqimni bloklashi mumkin. Ularni asinxron ravishda yoki sahifa interaktiv bo'lgandan keyin yuklashni ko'rib chiqing.
4. Mobil-First uchun Optimallashtiring: Dunyo bo'ylab mobil internetga kirishning keng tarqalganligini hisobga olgan holda, JavaScript yuklash strategiyangizni mobil foydalanuvchilar va sekinroq tarmoqlarni hisobga olgan holda loyihalashtiring va optimallashtiring.
5. Keshlashtirishdan Samarali Foydalaning: JavaScript aktivlaringiz uchun mustahkam brauzer keshlashtirish strategiyalarini amalga oshiring. Keshni buzish usullaridan foydalanish (masalan, fayl nomlariga xesh qo'shish) foydalanuvchilar kod o'zgarganda eng so'nggi kodni olishini ta'minlaydi.
6. Brotli yoki Gzip Siqishni Amalga Oshiring: Serveringiz JavaScript fayllarini siqish uchun sozlanganligiga ishonch hosil qiling. Brotli odatda Gzip-ga qaraganda yaxshiroq siqish nisbatlarini taklif qiladi.
7. Kuzatib Boring va Takrorlang: Samaradorlik bir martalik yechim emas. Ayniqsa, yangi funksiyalarni yoki yangilanishlarni joylashtirgandan so'ng, asosiy metriklaringizni doimiy ravishda kuzatib boring va optimallashtirish strategiyalaringizni takrorlang. Turli geografiyalar va qurilmalardagi foydalanuvchilaringiz nuqtai nazaridan unumdorlikni tushunish uchun real foydalanuvchi monitoringi (RUM) vositalaridan foydalaning.
8. Foydalanuvchi Kontekstini Hisobga Oling: Global foydalanuvchilaringiz ishlaydigan turli xil muhitlar haqida o'ylang. Bunga tarmoq tezligi, qurilma imkoniyatlari va hatto ma'lumotlar narxi kiradi. Kodni bo'lish va kechiktirilgan yuklash kabi strategiyalar ayniqsa ushbu kontekstlarda foydalidir.

Xulosa

JavaScript modul yuklanishini optimallashtirish global auditoriya uchun samarali, foydalanuvchiga qulay veb-ilovalarni yaratishning ajralmas qismidir. Kodni bo'lish, tree shaking, kechiktirilgan yuklash va samarali vendor to'plamlari kabi usullarni qo'llash orqali siz yuklanish vaqtini keskin kamaytirishingiz, interaktivlikni yaxshilashingiz va umumiy foydalanuvchi tajribasini oshirishingiz mumkin. FCP, TTI va TBT kabi muhim samaradorlik metrikalariga diqqat bilan e'tibor berish va kuchli tahlil vositalaridan foydalanish bilan birgalikda, dasturchilar o'z ilovalarining joylashuvi yoki tarmoq sharoitlaridan qat'i nazar, butun dunyo bo'ylab foydalanuvchilar uchun tez, ishonchli va qulay bo'lishini ta'minlay oladilar. Uzluksiz unumdorlik monitoringi va takrorlashga sodiqlik haqiqatan ham ajoyib global veb-mavjudlikka yo'l ochadi.